<template>
  <section class="dialog" :class="{'dialog_open': showDialog}">
    <div class="dialog_bg" @click="closeDialog"></div>
    <div class="dialog_content">
      <!-- 头部 -->
      <div class="dialog_header" v-if="showHeader">
        <slot name="header">
          <div class="close" @click="closeDialog">
            <i class="icon_close"></i>
          </div>
          <div class="title">{{ headerInfo.title }}</div>
          <div class="desc">{{ headerInfo.desc }}</div>
        </slot>
      </div>
      <!-- 主要内容 -->
      <div class="dialog_main">
        <slot name="main"></slot>
      </div>
      <!-- 底部 需要class=dialog_footer -->
      <slot name="footer"></slot>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    showHeader: {
      type: Boolean,
      default: true
    },
    headerInfo: {
      type: Object,
      default() {
        return {
          title: '',
          desc: ''
        }
      }
    }
  },
  data () {
    return {
      showDialog: false
    }
  },
  methods: {
    openDialog () {
      this.showDialog = true
    },
    closeDialog () {
      this.showDialog = false
    }
  }
}
</script>

<style scoped>
.dialog{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.dialog_bg{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0,0,0,.4);
  transition: opacity .3s;
  opacity: 0;
}
.dialog_open{
  z-index: 1000;
}
.dialog_open .dialog_bg{
  opacity: 1;
}
.dialog_content{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 1001;
  background: #f6f6f6;
  overflow: auto;
  transition: transform .4s,opacity .4s;
  transform: translateY(100%);
  opacity: 0;
}
.dialog_open .dialog_content{
  transform: translateY(0);
  opacity: 1;
}
.dialog_header{
  display: grid;
  height: 44px;
  background: #f2f2f2;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas: 'close title desc';
}
.dialog_header .close{
  grid-area: close;
  place-self: center flex-start;
}
.icon_close{
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
}
.icon_close:before {
  content: '';
  width: 17px;
  height: 1px;
  background: #333;
  display: block;
  position: relative;
}
.icon_close:after {
  content: '';
  width: 1px;
  height: 17px;
  background: #333;
  display: block;
  position: relative;
  left: -9px;
}
.dialog_header .title{
  grid-area: title;
  align-self: center;
  text-align: center;
}
.dialog_header .desc{
  grid-area: desc;
}
.dialog_main{
  height: 300px;
}
.dialog_footer{
  height: 44px;
  border-top: 1px solid #efefef;
}
</style>